iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

30天學網頁設計系列 第 21

Day21 jQuery 基本教學(一)

  • 分享至 

  • xImage
  •  

JQuery是由JavaScript所開發的開源函式庫,主要有以下功能大受好評而列入主流。

  1. 被簡化的 DOM 控制:比起原生JavaScript更能輕鬆對DOM監管
  2. 過度的轉場效果:能容易去控制CSS及配合兩者之間的過渡,也有自己的animate功能
  3. AJAX使用:能直接額外背後連線網頁並將資料取回,再透過DOM寫入,達到免重整畫面就能取得。
  4. 官方文件詳細
  5. 簡潔不笨重,壓縮後大約 32kB
  6. 只要你有 JavaScript 的基礎,不用再多去學習一大堆新語法
  7. 沒有跨瀏覽器的問題,jQuery 已經處理好了
  8. 支援 CSS3 選擇器
  9. 社群活躍,你可以有很多人家寫好免費的 plugin 用
  10. 跟其它 library 一起使用也不衝突

在使用 jQuery 之前,需要先了解基本的 JavaScript、CSS 與 HTML喔!

安裝

可以使用CDN或直接安裝到網站內,透過取得jquery.min.js。

可自行評估是使用 CDN 或下載於本機端
jQuery’s CDN 位置
jQuery 下載處

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
</script>

或直接下載下來放到你相同位置。就算沒有網路也可以運作

<script src="js/jquery-3.4.1.min.js"></script>

或者透過 Google CDN 載入 jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

語法說明

使用jQuery的$()為基礎並會變成 jQuery 的元件,透過jQuery元件進行相關程式指令。若要接續其他動作則以物件指向來進行行為規劃,例如:

$('li.list').addClass('color');

JQ 可接續其他對象或動作並能連續指定多種,舉個例子:

$('li.list').next().css('background-color','red').addClass('color');
  • 此為先找到 DOM 中的 li 標籤同時有 class name 為 list,接著下一個標籤為對象
  • 對此對象進行增加 CSS 樣式(背景色:red)
  • 對此對象進行增加 class name 為 color

此為找到 DOM 中的 li 標籤同時有 class name 為 list 的對象,對此對象進行增加 class name 為 color
也可使用jQuery() 來代表 $() 之寫法,如果無法使用該符號情況下。

jQuery 開頭都是 $() 函數進行元件套用,事實上同等於 jQuery() 寫法,如果當你使用一些 JavaScript 外掛也剛好有 $() 會衝突時,你可以改寫完整語法 jQuery()。


上一篇
Day20 Vue基本教學(二)
下一篇
Day22 jQuery 基本教學(二)
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言